class RatioEnlarge {
    constructor(el, options = {}) {
        this.el = document.querySelector(el)
        this.img = this.el.querySelector('.img')
        this.mask = this.el.querySelector('.mask')
        this.enlarge = this.el.querySelector('.enlarge')
        this.imgs = this.el.querySelectorAll('ul li')

        this.init()
    }
    init() {
        this.overOut()
        this.maskMove()
        this.enlargeSetWH()
        // this.enlargeSetBg()
        this.smallImgChange()
    }
    overOut() {
        this.img.onmouseover = () => this.mask.style.display = this.enlarge.style.display = 'block'
        this.img.onmouseout = () => this.mask.style.display = this.enlarge.style.display = 'none'
    }

    maskMove() {
        this.img.onmousemove = (evt) => {
            let e = evt || window.event
            let left = e.pageX - this.el.offsetLeft - this.mask.offsetWidth / 2
            let top = e.pageY - this.el.offsetTop - this.mask.offsetHeight / 2
            let maxLeft = this.img.clientWidth - this.mask.offsetWidth
            let maxTop = this.img.clientHeight - this.mask.offsetHeight
            if (left < 0) left = 0
            if (top < 0) top = 0
            if (left >= maxLeft) left = maxLeft
            if (top >= maxTop) top = maxTop
            this.mask.style.left = left + 'px'
            this.mask.style.top = top + 'px'
            this.enlargeSetBg(left, top)
        }

    }



    enlargeSetWH() {
        // div.enlarge background 800         div.enlarge w    ????  355.xxxx
        // ---------------------         =      -----------
        // div.img background    450           div.mask w     200   

        // div.enlarge w = div.mask w * (div.enlarge background / div.img background )
        let maskW = parseInt(this.getStyle(this.mask, 'width'))
        let maskH = parseInt(this.getStyle(this.mask, 'height'))
        let imgW = parseInt(this.img.clientWidth)
        let imgH = parseInt(this.img.clientHeight)
        let temp = this.getStyle(this.enlarge, 'background-size')
        let enlargeBgW = parseInt(temp.split(' ')[0])
        let enlargeBgH = parseInt(temp.split(' ')[1])
        let enlargeW = maskW * (enlargeBgW / imgW)
        let enlargeH = maskH * (enlargeBgH / imgH)
        this.enlarge.style.width = enlargeW + 'px'
        this.enlarge.style.height = enlargeH + 'px'

    }
    enlargeSetBg(left, top) {
        let maskW = parseInt(this.getStyle(this.mask, 'width'))
        let enlargeW = parseInt(this.enlarge.style.width)
        let ratio = enlargeW / maskW
        this.enlarge.style.backgroundPosition = `-${left * ratio}px -${top * ratio}px`

    }
    smallImgChange() {
        this.imgs.forEach((item, i) => {
            item.onclick = () => {
                this.el.querySelector('ul li.active').className = ''
                item.className = 'active'
                this.img.style.background = 'url(./imgs/'+(i+1)+'.jpg)'
                this.enlarge.style.background = `url(./imgs/${(i+1)}big.jpg)`
            }
        })


    }


















    /**
    * 判断标签【非行内】样式
    * @param object string 举例  getStyle(divObj, 'color')
    * @return string
    */

    getStyle(tagObj, cssAttr) {
        if (window.getComputedStyle) {
            return getComputedStyle(tagObj)[cssAttr] //对象的键taObj是变量
        } else {
            return tagObj.currentStyle[cssAttr]
        }

    }
}
















export default RatioEnlarge